<template>
  <div class="home_right_box">
    <div class="base_title" @click="clickTitle">{{ props.mainTitle }}</div>
    <n-spin :show="loading">
      <!-- 空状态 -->
      <n-empty v-if="loading || !props.data.length" description="暂无数据" />
      
      <!-- 实际列表 -->
      <transition-group 
        name="list" 
        tag="div" 
        class="home_right_box_list"
        v-else
      >
        <div 
          class="home_right_box_list_item" 
          v-for="(item, index) in props.data" 
          :key="item.id || index" 
          @click="clickListOne(item)"
        >
          <div class="home_right_box_list_item_left oneLine">
            <div class="home_right_box_list_item_left_num">{{ index + 1 }}</div>
            <div class="home_right_box_list_item_left_title oneLine" :title="item.title">
              {{ item.title }}
            </div>
          </div>
          <div class="home_right_box_list_item_right oneLine">
            <div class="home_right_box_list_item_right_num">{{item.average_score.toFixed(1)}}</div>
          </div>
        </div>
      </transition-group>
    </n-spin>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { takeNumbers } from '@/utils/base';
import { NEmpty, NSpin } from 'naive-ui';

const loading = ref(false);

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  mainTitle: {
    type: String,
    default: ''
  },
  clickTitle: {
    type: Function,
    default: () => {}
  },
  clickListOne: {
    type: Function,
    default: () => {}
  }
});
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.home_right_box {
  width: 100%;
  overflow: hidden;
  margin-bottom: 1rem;
  .base_title{
    cursor: pointer;
    &:hover{
      color:$baseColor;
    }
  }
  &_list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    
    &_item,
    &_item_left,
    &_item_right {
      display: flex;
      align-items: center;
      font-size: 0.8rem;
    }
    &_item {
      transition: all 0.3s ease;
      border-radius: 4px;
      padding: 0.1rem 0.5rem;
      cursor: pointer;
      &:hover {
        background: rgba($baseColor, 0.1);
        transform: translateX(5px);
      }
      @for $i from 1 through 3{
        &:nth-child(#{$i}) {
          margin-bottom: 0.5rem;
          .home_right_box_list_item_left_num {
            color: $baseColor;
            font-weight: bold;
          }
        }
      }
      &_left {
        flex: 1;
        &_num {
          margin-right: 0.5rem;
          font-size: 1.3rem;
          font-style: italic;
        }
      }

      &_right {
        margin-left: 0.1rem;
        font-size: 1.1rem;
        flex-shrink: 0;
      }
    }
  }
}

</style>
